<template>
  <div class="policy-genome-map">
    <header>政策基因图谱</header>
    <form @submit.prevent="onSearch" class="search-form">
      <input
        v-model.trim="query"
        type="text"
        placeholder="输入目的，大模型检索相关政策"
        class="search-input"
        @focus="showTrending = true"
        @blur="hideTrendingWithDelay"
      />
      <button type="submit" class="search-button">搜索</button>

      <div v-if="showTrending" class="trending-searches">
        <div class="trending-title">热搜</div>
        <ul>
          <li
            v-for="item in trendingSearches"
            :key="item"
            @mousedown.prevent="selectTrending(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </form>

    <div class="gene-container">
      <div v-if="policies.length === 0 && query !== ''" class="no-results">
        没有找到相关政策，请尝试其他关键词。
      </div>
      <div v-else class="policy-lines">
        <div
          v-for="(line, idx) in policies"
          :key="idx"
          class="policy-line"
        >
          <div class="region-title">{{ line.region }}:</div>
          <div class="policy-grid">
            <div
              v-for="(policy, index) in line.policies"
              :key="index"
              class="policy-item"
              @click="goToPolicyGraph(policy)"
            >
              <div
                class="policy-rect"
                :style="{ backgroundColor: getPolicyColor(policy) }"
              >
                {{ getPolicyBase(policy) }}
              </div>
              <div class="policy-type">{{ policy }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PolicyGenomeMap',
  data() {
    return {
      query: '',
      // 按地区分组的多行输出
      policies: [],
      policyMap: {
        经济: { base: 'A', color: '#e53935' },
        环境: { base: 'T', color: '#43a047' },
        健康: { base: 'C', color: '#fdd835' },
        教育: { base: 'G', color: '#1e88e5' },
        科技: { base: 'U', color: '#8e24aa' }
      },
      // 模仿用户提问形式的功能映射
      functionToPolicies: {
        '我是博士后，有没有适合我的人才引进政策': [
          { region: '北京', policies: ['科技', '教育', '经济', '科技'] },
          { region: '上海', policies: ['教育', '科技', '经济', '教育'] },
          { region: '广州', policies: ['经济', '健康', '教育'] }
        ],
        '我是企业家，有没有适合我的投资政策': [
          { region: '深圳', policies: ['经济', '科技', '经济'] },
          { region: '杭州', policies: ['经济', '科技', '教育', '环境'] },
          { region: '成都', policies: ['经济', '教育', '科技'] }
        ],
        '我们公司想进行环保改造，有没有相关补贴': [
          { region: '武汉', policies: ['环境', '环境', '经济'] },
          { region: '西安', policies: ['环境', '健康', '环境', '经济'] },
          { region: '天津', policies: ['环境', '经济', '教育'] }
        ],
        '有没有公共服务方面的政策？': [
          { region: '重庆', policies: ['健康', '教育', '经济'] },
          { region: '苏州', policies: ['科技', '教育', '环境'] },
          { region: '南京', policies: ['教育', '环境', '经济'] }
        ]
      },
      trendingSearches: [
        '我是博士后，有没有适合我的人才引进政策',
        '我是企业家，有没有适合我的投资政策',
        '我们公司想进行环保改造，有没有相关补贴',
        '有没有公共服务方面的政策？'
      ],
      showTrending: false,
      blurTimeout: null
    };
  },
  methods: {
    onSearch() {
      this.policies = this.functionToPolicies[this.query] || [];
      this.showTrending = false;
    },
    getPolicyColor(policy) {
      return this.policyMap[policy]?.color || '#aaa';
    },
    getPolicyBase(policy) {
      return this.policyMap[policy]?.base || '?';
    },
    goToPolicyGraph(policy) {
      this.$router.push({ path: '/policy-graph', query: { type: policy } });
    },
    selectTrending(item) {
      this.query = item;
      this.onSearch();
      this.showTrending = false;
    },
    hideTrendingWithDelay() {
      this.blurTimeout = setTimeout(() => {
        this.showTrending = false;
      }, 150);
    }
  },
  beforeUnmount() {
    if (this.blurTimeout) clearTimeout(this.blurTimeout);
  }
};
</script>

<style scoped>
.policy-genome-map {
  background-color: #0a1f3a;
  color: #fff;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}
header {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #a0c0e0;
}
.search-form {
  position: relative;
  display: flex;
  margin-bottom: 30px;
  width: 100%;
  max-width: 500px;
}
.search-input {
  flex-grow: 1;
  padding: 12px 15px;
  font-size: 1.1rem;
  border: 1px solid #1e88e5;
  border-radius: 8px 0 0 8px;
  outline: none;
  background-color: #f0f8ff;
  color: #333;
}
.search-input::placeholder {
  color: #888;
}
.search-button {
  padding: 12px 20px;
  font-size: 1.1rem;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  background-color: #1e88e5;
  color: #fff;
  transition: background-color 0.3s;
}
.search-button:hover {
  background-color: #1565c0;
}
.trending-searches {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #1a3656;
  border: 1px solid #1e88e5;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}
.trending-title {
  padding: 10px 15px;
  font-size: 0.9rem;
  color: #ccc;
  border-bottom: 1px solid #2a4c73;
}
.trending-searches ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.trending-searches li {
  padding: 10px 15px;
  cursor: pointer;
  color: #e0f2f7;
  transition: background-color 0.2s;
}
.trending-searches li:hover {
  background-color: #2a4c73;
}
.gene-container {
  flex: 1;
  width: 90%;
  padding: 20px;
  border-radius: 8px;
  background-color: #122b45;
  overflow-y: auto;
}
.policy-lines {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}
.policy-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.region-title {
  min-width: 80px;
  font-weight: bold;
  color: #e0f2f7;
  align-self: center;
}
.policy-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.policy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-align: center;
}
.policy-rect {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 5px;
}
.policy-type {
  font-size: 0.9rem;
  color: #e0f2f7;
  word-break: break-word;
  max-width: 80px;
}
.no-results {
  color: #ccc;
  font-size: 1.1rem;
  padding: 50px;
  text-align: center;
}
</style>
